<template>
  <div class="verifier-page">
    <c-title :hide="false" text="核销员管理"></c-title>
    <van-search v-model="keyword" placeholder="请输入搜索关键词" use-action-slot show-action @input="onSearchChange">
      <template #action>
        <div @click="onAddition" class="append flex-a-c flex-j-c">添加核销员</div>
      </template>
    </van-search>

    <div class="verifier-list" v-if="verifierList.length > 0">
      <block v-for="(item, index) in verifierList" :key="index">
        <div class="verifier-item flex-j-sb flex-a-c">
          <div class="flex">
            <div class="image">
              <van-image round width="2.1875rem" height="2.1875rem" :src="item.has_one_member && item.has_one_member.avatar" />
            </div>
            <div>
              <div class="flex">
                <div class="title">{{ item.has_one_member && item.has_one_member.nickname }}</div>
                <div>
                  <div class="id">id:{{ item.has_one_member && item.has_one_member.uid }}</div>
                </div>
              </div>
              <div>
                <div class="total">累计核销次数：{{ item.has_many_coupon_count }}</div>
              </div>
              <div class="switch">
                <van-switch active-color="#FF3A00" v-model="item.checked" size="0.75rem" @change="onVerifierChange(item, index)" />
              </div>
            </div>
          </div>
          <div class="verifier-right">
            <van-image
              width="1.5625rem"
              height="1.5625rem"
              src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/delete.png"
              @click="verifierDelete(item.id)"
              round
            />
            <van-image
              width="1.5625rem"
              height="1.5625rem"
              class="upadte"
              src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/update.png"
              @click="verifierUpdate(item.id)"
              round
            />
          </div>
        </div>
        <div class="mb20"></div>
      </block>
    </div>
    <van-empty description="描述文字" v-else />
    <van-dialog id="van-dialog" />
  </div>
</template>
<script>
import verifierList_controller from "./verifierList_controller.js";
export default verifierList_controller;
</script>
<style scoped>
.verifier-right ::v-deep .van-image__img {
  cursor: pointer;
}
</style>
<style lang="scss" scoped>
.mb20 {
  height: 0.625rem;
  clear: both;
}

.verifier-page .append {
  width: 5rem;
  height: 1.875rem;
  line-height: 1.875rem;
  text-align: center;
  background: linear-gradient(90deg, #ff693d 0%, #ff3c03 100%);
  border-radius: 0.9375rem;
  font-size: 0.75rem;
  color: #fff;
}

.verifier-list {
  margin: 0.625rem 0.625rem 0 0.625rem;

  .verifier-item {
    background-color: #fff;
    padding: 0.8125rem;
    border-radius: 0.3125rem;
  }
}

.verifier-item {
  .image {
    margin-right: 0.5938rem;
  }

  .verifier-right {
    flex-shrink: 0;

    img {
      cursor: pointer;
    }
  }

  .title {
    font-size: 0.75rem;
    color: #222;
    font-weight: bold;
    margin-bottom: 0.3125rem;
  }

  .id {
    font-size: 0.625rem;
    color: #ff3a00;
    padding: 0.0625rem 0.3125rem 0.0625rem 0.3125rem;
    background-color: rgba(255, 58, 0, 0.1);
    margin-left: 0.3125rem;
  }

  .total {
    font-size: 0.625rem;
    color: #7b7b7b;
    margin-bottom: 0.625rem;
    text-align: left;
  }

  .switch {
    text-align: left;
  }

  .upadte {
    margin-left: 1.4375rem;
  }
}
</style>
